<template>
  <div>
    <div>api</div>
  <div>{{name}}</div>
    <div @click="changeTestData">{{testData.text}}</div>
    <div @click="changeTestTorefs">{{refsInfo.code}}</div>
    <div @click="changerefData">{{refTest}}</div>
    <div>{{computedData}}</div>
  </div>
</template>

<script>
import {reactive, ref, toRefs,computed, watch} from 'vue'
export default {
  props: {
    name: String
  },
  setup(props, context) {
    // console.log(`api组件传递props$`,props);
    // console.log(`api组件的上下文对象`,context);
    const testData = reactive({text: 'reactive 测试'})
    const testTorefs = reactive({text: 'toRefs 测试', refsInfo: {
      code: 0,
      a: {a:1}
    }})
    const refTest = ref('ref test')
    console.log({
      testData,
      refTest,
      ...toRefs(testTorefs)
    });
    const computedData = computed(() => {
      return 'computed' + refTest.value
    })
    const watchData = watch(
      () => refTest.value,
      (newValue, oldValue) => {
        console.log('watchData');
        console.log(newValue, oldValue);        
      },
      {
        lazy: false
      }
      )
    return {
      testData,
      
      ,
      computedData,
      ...toRefs(testTorefs)
    }
  },
  methods: {
    changeTestData() {
      this.testData.text = 'reactive change'
    },
    changeTestTorefs() {
      this.refsInfo.code = '1111111111'
    },
    changerefData() {
      this.refTest = 'ref change'
    }
  }
}
</script>

<style>

</style>